import React, { useState } from 'react';

export const Tabs = ({ children, defaultValue, className = '' }) => {
  const [activeTab, setActiveTab] = useState(defaultValue || children[0].props.value);
  
  const handleTabChange = (value) => {
    setActiveTab(value);
  };
  
  const tabs = React.Children.toArray(children).filter(child => child.type === Tab);
  
  return (
    <div className={`w-full ${className}`}>
      <div className="flex border-b dark:border-gray-700">
        {tabs.map(tab => (
          <button
            key={tab.props.value}
            onClick={() => handleTabChange(tab.props.value)}
            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab.props.value
                ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            {tab.props.label}
          </button>
        ))}
      </div>
      
      <div className="py-4">
        {tabs.map(tab => (
          activeTab === tab.props.value && <div key={tab.props.value}>{tab.props.children}</div>
        ))}
      </div>
    </div>
  );
};

export const Tab = ({ value, label, children }) => {
  // 这个组件只是一个容器，实际渲染由Tabs组件处理
  return <div>{children}</div>;
};
